<template>
  <el-container class="activity-list panel-block">
    <el-header class="sa-header">
      <div class="sa-title sa-flex sa-row-between">
        <div class="label sa-flex">
          <span class="left">{{ title }}</span>
          <search-condition
            :conditionLabel="filterParams.conditionLabel"
            @deleteFilter="deleteFilter"
          ></search-condition>
        </div>
        <div>
          <el-button class="sa-button-refresh" icon="RefreshRight" @click="getData()"></el-button>
          <el-button class="sa-button-refresh" icon="Search" @click="openFilter"></el-button>
          <el-button
            v-auth="'shop.admin.activity.activity.add'"
            type="primary"
            icon="Plus"
            @click="addRow"
            >添加</el-button
          >
          <el-button
            v-auth="'shop.admin.activity.activity.recyclebin'"
            type="danger"
            icon="Delete"
            plain
            @click="openRecyclebin"
            >回收站</el-button
          >
        </div>
      </div>
    </el-header>
    <el-main class="sa-p-0" v-loading="loading">
      <el-table height="100%" class="sa-table" :data="table.data" stripe>
        <template #empty>
          <sa-empty />
        </template>
        <el-table-column prop="id" label="ID" min-width="80"></el-table-column>
        <el-table-column label="活动名称" min-width="200">
          <template #default="scope">
            <div class="sa-table-line-1">{{ scope.row.title }}</div>
          </template>
        </el-table-column>
        <el-table-column v-if="route.query.type != 'signin'" label="参与商品" min-width="244">
          <template #default="scope">
            <el-popover trigger="hover" :width="336">
              <div>
                <div class="goods-item sa-flex" v-for="g in scope.row.goods" :key="g">
                  <sa-image :url="g.image" size="40"></sa-image>
                  <div class="sa-m-l-12">
                    <div class="goods-title sa-table-line-1 sa-m-b-4">
                      {{ g.title }}
                    </div>
                    <div class="goods-id">#{{ g.id }}</div>
                  </div>
                </div>
              </div>
              <template #reference>
                <div class="goods-reference">
                  <template v-if="scope.row.goods_ids">
                    <span class="leng">{{ scope.row.goods?.length }}</span>
                    件商品
                  </template>
                </div>
              </template>
            </el-popover>
            <div v-if="!scope.row.goods_ids">全部商品</div>
          </template>
        </el-table-column>
        <el-table-column label="活动状态" min-width="110">
          <template #default="scope">
            <div class="status" :class="`status-${scope.row.status}`">
              {{ scope.row.status_text }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="活动时间" min-width="250">
          <template #default="scope">
            <div>
              <div>开始时间：{{ scope.row.start_time }}</div>
              <div>结束时间：{{ scope.row.end_time }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="update_time" label="更新时间" min-width="172"></el-table-column>
        <el-table-column label="活动说明" min-width="158">
          <template #default="scope">
            <div class="sa-table-line-1">{{ scope.row.richtext_title }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="160" fixed="right">
          <template #default="scope">
            <el-button
              v-if="scope.row.type == 'groupon' || scope.row.type == 'groupon_ladder'"
              v-auth="'shop.admin.activity.groupon.list'"
              class="is-link"
              type="primary"
              @click="grouponList(scope.row.id)"
              >查看</el-button
            >
            <el-button
              v-auth="'shop.admin.activity.activity.detail'"
              class="is-link"
              type="primary"
              @click="editRow(scope.row.id)"
              >编辑</el-button
            >
            <el-popconfirm
              width="fit-content"
              confirm-button-text="确认"
              cancel-button-text="取消"
              title="确认删除这条记录?"
              @confirm="deleteRow(scope.row.id)"
            >
              <template #reference>
                <el-button
                  v-auth="'shop.admin.activity.activity.delete'"
                  class="is-link"
                  type="danger"
                >
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <sa-view-bar>
      <template #right>
        <sa-pagination :pageData="pageData" @updateFn="getData" />
      </template>
    </sa-view-bar>
  </el-container>
</template>
<script setup>
  import { onMounted, reactive, ref } from 'vue';
  import { api } from '../activity.service';
  import { useModal, usePagination } from '@/sheep/hooks';
  import { useSearch } from '@/sheep/components/sa-table/sa-search/useSearch';
  import { composeFilter } from '@/sheep/utils';
  import { activityData } from './data';
  import ActivityEdit from './edit.vue';
  import ActivityRecyclebin from './recyclebin.vue';
  import { cloneDeep } from 'lodash';

  import { useRoute, useRouter } from 'vue-router';
  const route = useRoute();
  const router = useRouter();

  const title = ref('');
  activityData.filter((k) => {
    for (var key in k.children) {
      if (key == route.query.type) {
        title.value = k.children[key].title;
      }
    }
  });

  const filterParams = reactive({
    tools: {
      title: {
        type: 'tinput',
        label: '活动名称',
        field: 'title',
        value: '',
      },
      status: {
        type: 'tselect',
        label: '状态',
        field: 'status',
        value: '',
        options: {
          data: [
            {
              label: '全部',
              value: 'all',
            },
            {
              label: '未开始',
              value: 'nostart',
            },
            {
              label: '进行中',
              value: 'ing',
            },
            {
              label: '已结束',
              value: 'ended',
            },
          ],
        },
      },
      activity_time: {
        type: 'tdatetimerange',
        label: '时间',
        field: 'activity_time',
        value: [],
      },
    },
    data: {
      title: '',
      status: 'all',
      activity_time: [],
    },
    conditionLabel: {},
  });
  const { openFilter, deleteFilter } = useSearch({ filterParams, getData });

  const loading = ref(true);

  // 表格
  const table = reactive({
    data: [],
    order: '',
    sort: '',
    selected: [],
  });

  const { pageData } = usePagination();

  // 获取数据
  async function getData(page) {
    loading.value = true;
    if (page) pageData.page = page;
    let tempSearch = cloneDeep(filterParams.data);
    let search = composeFilter(tempSearch, {
      title: 'like',
      activity_time: 'range',
    });
    const { error, data } = await api.activity.list(route.query.type, {
      page: pageData.page,
      list_rows: pageData.list_rows,
      ...search,
    });
    if (error === 0) {
      table.data = data.data;
      pageData.page = data.current_page;
      pageData.list_rows = data.per_page;
      pageData.total = data.total;
    }
    loading.value = false;
  }

  function addRow() {
    useModal(
      ActivityEdit,
      {
        title: `添加${title.value}`,
        type: 'add',
        atype: route.query.type,
      },
      {
        confirm: () => {
          getData();
        },
      },
    );
  }
  function editRow(id) {
    useModal(
      ActivityEdit,
      {
        title: `编辑${title.value}`,
        type: 'edit',
        atype: route.query.type,
        id: id,
      },
      {
        confirm: () => {
          getData();
        },
      },
    );
  }
  //拼团列表
  function grouponList(id) {
    router.push({
      path: '/shop/admin/activity/groupon',
      query: {
        activity_id: id,
      },
    });
  }
  async function deleteRow(id) {
    await api.activity.delete(id);
    getData();
  }
  function openRecyclebin() {
    useModal(
      ActivityRecyclebin,
      {
        title: `${title.value}回收站`,
        type: route.query.type,
      },
      {
        confirm: () => {
          getData();
        },
      },
    );
  }

  onMounted(() => {
    getData();
  });
</script>
<style lang="scss" scoped>
  .activity-list {
    .goods-reference {
      width: fit-content;
      cursor: pointer;
      .leng {
        color: var(--el-color-primary);
      }
    }
    .goods-item {
      order: 1px solid var(--sa-space);
      padding: 8px 0;
      .goods-title {
        line-height: 20px;
        font-size: 14px;
        color: var(--sa-font);
      }
      .goods-id {
        line-height: 16px;
        font-size: 12px;
        color: var(--sa-subfont);
      }
    }
    .status {
      &.status-nostart {
        color: #999;
      }
      &.status-ing {
        color: #52c41a;
      }
      &.status-ended {
        color: #ff4d4f;
      }
    }
  }
</style>
